<head>
  <style>
    body {
      margin: 0;
    }
  </style>
  <script src="https://unpkg.com/3d-force-graph"></script>
</head>
<body>
  <div id="3d-graph"></div>
  <script src="./js/bridge.js"></script>
  <script type="module">
    import { getQueryParam } from './js/utils.js'

    const apiUrl = getQueryParam('apiUrl')
    const modelId = getQueryParam('modelId')
    const jsonUrl = `${apiUrl}/v1/global_graph/${modelId}`

    const infoCard = document.createElement('div')
    infoCard.style.position = 'fixed'
    infoCard.style.backgroundColor = 'rgba(255, 255, 255, 0.9)'
    infoCard.style.padding = '8px'
    infoCard.style.borderRadius = '4px'
    infoCard.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)'
    infoCard.style.fontSize = '12px'
    infoCard.style.maxWidth = '200px'
    infoCard.style.display = 'none'
    infoCard.style.zIndex = '1000'
    document.body.appendChild(infoCard)

    document.addEventListener('mousemove', (event) => {
      infoCard.style.left = `${event.clientX + 10}px`
      infoCard.style.top = `${event.clientY + 10}px`
    })

    const elem = document.getElementById('3d-graph')
    const Graph = ForceGraph3D()(elem)
      .jsonUrl(jsonUrl)
      .nodeAutoColorBy((node) => node.properties.type || 'default')
      .nodeVal((node) => node.properties.degree)
      .linkWidth((link) => link.properties.weight)
      .onNodeHover((node) => {
        if (node) {
          infoCard.innerHTML = `
            <div style="font-weight: bold; margin-bottom: 4px; color: #333;">
              ${node.properties.title}
            </div>
            <div style="color: #666;">
              ${node.properties.description}
            </div>`
          infoCard.style.display = 'block'
        } else {
          infoCard.style.display = 'none'
        }
      })
      .onNodeClick((node) => {
        const url = `${apiUrl}/v1/references/${modelId}/entities/${node.properties.human_readable_id}`
        window.api.minApp({
          url,
          windowOptions: {
            title: node.properties.title,
            width: 500,
            height: 800
          }
        })
      })
  </script>
</body>
